<template>
	<view class="imgContainer">
		<image :src="postValue.imagelink" mode="aspectFill"></image>
	</view>
	<view class="uni-padding-wrap uni-common-mt">
		<uni-segmented-control :current="current" :values="items" :style-type="styleType"
			:active-color="activeColor" @clickItem="onClickItem" />
	</view>
	<view class="content">
		<view v-if="current === 0">
			<text class="post">{{postValue.content}}</text>
		</view>
		<view v-if="current === 1" class="comment1">
			<scroll-view  :style="{height: `${windowHeight-inputHeight - 180}rpx`}"
						id="scrollview"
						scroll-y="true" 
						:scroll-top="scrollTop"
						class="scroll-view"
						>
							<!-- 聊天主体 -->
							<view id="msglistview" class="chat-body">
								<!-- 聊天记录 -->
								<view v-for="(item,index) in newsContent1" :key="index">
									<!-- 自己发的消息 -->
									<!-- <view class="item self" v-if="item.content != ''" >
										文字内容 -->
										<!-- <view class="content right">
										{{item.content}}
										</view>
										头像 -->
										<!-- <view>
										<image class="avatar" :src="item.userimage"></image>
										<text class="username">{{item.username}}</text>
										</view>
									</view> --> 
									<!-- 机器人发的消息 -->
									<view class="item Ai" v-if="item.content != ''">
										<!-- 头像 -->     
										<view>
										<image class="avatar" :src="item.userimage"></image>
										<text class="username">{{item.username}}</text>
										</view>
										<view>
										</view>
										<!-- 文字内容 -->
										<view class="content left">
											{{item.content}}
										</view>
									</view>
								</view>
								<!-- 聊天记录 -->
								<view v-for="(item,index) in newsContent" :key="index">
								<!-- 自己发的消息 -->
									<view class="item self" v-if="item != ''" >
									<!-- 	文字内容 -->
										<view class="content right">
										{{item}}
										</view>
									<!-- 	头像 -->
										<view>
										<image class="avatar" :src="item.userimage"></image>
										<text class="username">{{item.username}}</text>
										</view>
									</view>
									<!-- 机器人发的消息 -->
								</view>
							</view>
						</scroll-view>
						<!-- 底部消息发送栏 -->
						<!-- 用来占位，防止聊天消息被发送框遮挡 -->
						<view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
							<view class="send-msg" :style="{bottom:`${keyboardHeight - 60}rpx`}">
						<view class="uni-textarea">
						  <textarea v-model="chatMsg"
						    maxlength="300"
						    confirm-type="send"
						    @confirm="handleSend"
						    placeholder="快来聊天吧~"
						    :show-confirm-bar="false"
						    :adjust-position="false"
						    @linechange="sendHeight"
						    @focus="focus" @blur="blur"
						   auto-height></textarea>
						</view>
								<button @click="handleSend" class="send-btn">发送</button>
							</view>
			</view>
			<!-- <view class="commented">
				<view class="commentContainer" v-for="(item,index) in newsContent1" :key="index">
					<view><view class="img"><image :src="item.userimage"></image></view><text class="username">{{item.username}}</text></view>
					
						
					<view class="message-bubble1">{{item.content}}</view>
					
				</view>
			
			</view>	
			<view class="content-text">
				<view class="message-bubble" v-for="(item,index) in newsContent" :key="index" >
									 :class="{'from-me':newsContent.fromMe}" -->
					<!-- {{item}}
				</view>
			</view>
			<view class="commentbtn">
				<button @click="handleComment">评论一下</button>	
			</view>
			<view>
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose"  mode="base" title="输入内容" value="对话框预置提示内容!"
						placeholder="请输入评论" @confirm="submitComment">
						<textarea
							v-model="newComment"
						    placeholder="留下您的精彩评论"
						    auto-height
						    style="width: 90%; min-height: 100px;"
						></textarea>
						</uni-popup-dialog>
				</uni-popup>
			</view> --> 
			
			
		</view>
	</view>
</template>
<script setup>
	import {  computed, ref, onMounted, onUpdated } from 'vue';
	import {onLoad, onShow} from '@dcloudio/uni-app';
	import {
		baseUrl
	} from '../../tool/tool';
	const current = ref(0);
	const items = ['详情', '评论'];
	const newId = ref();
	const keyboardHeight = ref(0);
	const bottomHeight = ref(0);
	const scrollTop = ref(0);
	const userId = ref('');
	const chatMsg = ref("");

	const onClickItem = (e) => {
	  if (current.value !== e.currentIndex) {
	    current.value = e.currentIndex;
	  }
	};
	onLoad((query)=>{
		console.log("newID",query.newID);
		newId.value = query.newID;
		console.log(newId.value);
	})
	const inputDialog = ref(null);

	const commentsCount = ref(0);
	const newComment = ref("");
	const newsContent = ref([]);
	const newsContent1 = ref([
		// {
		// 	userUrl:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
		// 	userName:"aaaa",
		// 	comment:"sdawawfaewfaw"
			
		// },
		// {
		// 	userUrl:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
		// 	userName:"bbb",
		// 	comment:"dsadawdawg"
		// }
	]);
	const postValue = ref();
	const app = getApp();
	function rpxTopx(px){
			let deviceWidth = uni.getSystemInfoSync().windowWidth
			let rpx = ( 750 / deviceWidth ) * Number(px)
			return Math.floor(rpx)
		}

	// function submitComment(){
	// 	      if (newComment.value.trim() !== '') {
	// 	        commentsCount.value++;
	// 	        // 可以将评论内容提交到服务器，或者在本地保存等操作
	// 			newsContent.value.push(newComment.value);
	// 			uni.request({
	// 				url:baseUrl+"/Post/addComment",
	// 				method:'POST',
	// 				data:{
	// 					schoolNewID:newId.value,
	// 					userAccount:app.globalData.account,
	// 					content:newComment.value,
	// 					userimage:"",
	// 					username:""
	// 				},
	// 				success: (res) => {
	// 					console.log("comment success")
	// 				}
	// 			})
	// 	        newComment.value = '';console.log(1);

	// 			console.log(newsContent.value)
	// 	        // showCommentDialog.value = false;
	// 	      }else{
	// 			  console.log(2);
	// 		  }
	// }
	
	function handleComment(){
		// console.log("jinlail");
		if(inputDialog.value){
			inputDialog.value.open();
		}
	}
    onShow(() =>{
		console.log("sh")
		uni.request({
			url:baseUrl+"/Post/getPostByID?id="+newId.value,
			method:'GET',
			success: (res) => {
				postValue.value=res.data
			}
		}),
		uni.request({
			url:baseUrl+"/Post/getComment?postId="+newId.value,
			method:'GET',
			success: (res) => {
				newsContent1.value=res.data
			}
		})
	})
	function scrollToBottom(e){
			setTimeout(()=>{
				let query = uni.createSelectorQuery().in(this);
				query.select('#scrollview').boundingClientRect();
				query.select('#msglistview').boundingClientRect();
				query.exec((res) =>{
					if(res[1].height > res[0].height){
						scrollTop.value = rpxTopx(res[1].height - res[0].height)
					}
				})
			},15)
		}
		onUpdated(() => {
			//页面更新时调用聊天消息定位到最底部
			scrollToBottom();
		});
		const windowHeight = computed(() => {
			return rpxTopx(uni.getSystemInfoSync().windowHeight);
		}
		);
		const inputHeight = computed(() => {
			return bottomHeight.value + keyboardHeight.value;
		}
		);
		onLoad(() => {
			uni.onKeyboardHeightChange(res => {
				
				keyboardHeight.value = rpxTopx(res.height)
				if(keyboardHeight.value<0)keyboardHeight.value = 0;
			})
		});
		// function goback(){
		// 	uni.switchTab({
		// 	  url: "/pages/tutorship/tutorship"
		// 	})
		// }
		function focus(){
			scrollToBottom()
		}
		function blur(){
			scrollToBottom()
		}
		
		function sendHeight(){
			setTimeout(()=>{
				let query = uni.createSelectorQuery();
				query.select('.send-msg').boundingClientRect()
				query.exec(res =>{
					bottomHeight.value = rpxTopx(res[0].height)
				})
			},10)
		}
		
		function handleSend() {
			if (chatMsg.value.trim() !== '') {
			  commentsCount.value++;
			  // 可以将评论内容提交到服务器，或者在本地保存等操作
							newsContent.value.push(chatMsg.value);
							uni.request({
								url:baseUrl+"/Post/addComment",
								method:'POST',
								data:{
									schoolNewID:newId.value,
									userAccount:app.globalData.account,
									content:chatMsg.value,
									userimage:"",
									username:""
								},
								success: (res) => {
									console.log("comment success")
								}
							})
				console.log(chatMsg.value)
				console.log(newsContent.value)
			  chatMsg.value = '';console.log(1);
			

			  // showCommentDialog.value = false;
			}else{
							  console.log(2);
			}
			// 		//如果消息不为空
			// if(!chatMsg.value||!/^\s+$/.test(chatMsg.value)){
			// 	let obj = {
			// 		botContent: "",
			// 		userContent: chatMsg.value,
			// 		image:"/static/common/unname2.jpg"
			// 	}
			// 	newsContent.value.push(obj);
			// 	chatMsg.value = '';
			// 	scrollToBottom()
			// }else {
			// 	$modal.showToast('不能发送空白消息')
			// }
		}


</script>

<style lang="scss" scoped>
	$chatContentbgc: #C2DCFF;
		$sendBtnbgc: #4F7DF5;
		view,button,text,input,textarea {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.comment1{
		/* 聊天消息 */
		// .chat {
			.scroll-view {
				::-webkit-scrollbar {
						    display: none;
						    width: 0 !important;
						    height: 0 !important;
						    -webkit-appearance: none;
						    background: transparent;
						    color: transparent;
						  }
				
				// background-color: orange;
				background-color: #F6F6F6;
				
				.chat-body {
					display: flex;
					flex-direction: column;
					padding-top: 23rpx;
					// background-color:skyblue;
					
					.self {
						justify-content: flex-end;
					}
					.item {
						display: flex;
						padding: 23rpx 30rpx;
						// background-color: greenyellow;
		 
						.right {
							background-color: $chatContentbgc;
						}
						.left {
							background-color: #FFFFFF;
						}
		                // 聊天消息的三角形
						.right::after {
							position: absolute;
							display: inline-block;
							content: '';
							width: 0;
							height: 0;
							left: 100%;
							top: 10rpx;
							border: 12rpx solid transparent;
							border-left: 12rpx solid $chatContentbgc;
						}
		 
						.left::after {
							position: absolute;
							display: inline-block;
							content: '';
							width: 0;
							height: 0;
							top: 10rpx;
							right: 100%;
							border: 12rpx solid transparent;
							border-right: 12rpx solid #FFFFFF;
						}
		 
						.content {
							position: relative;
							max-width: 486rpx;
							border-radius: 8rpx;
							word-wrap: break-word;
							padding: 24rpx 24rpx;
							margin: 0 24rpx;
							border-radius: 5rpx;
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 42rpx;
						}
		 
						.avatar {
							display: flex;
							justify-content: center;
							width: 78rpx;
							height: 78rpx;
							background: $sendBtnbgc;
							border-radius: 50rpx;
							overflow: hidden;
							
							image {
								align-self: center;
							}
		 
						}
					}
				}
			}
		 
			/* 底部聊天发送栏 */
			.chat-bottom {
				width: 100%;
				height: 100rpx;
				background: #F4F5F7;
				transition: all 0.1s ease;
				
				.send-msg {
					display: flex;
					align-items: flex-end;
					padding: 16rpx 30rpx;
					width: 100%;
					min-height: 177rpx;
					position: fixed;
					bottom: 0;
					background: #fff;
					transition: all 0.1s ease;
				}
		 
				.uni-textarea {
					padding-bottom: 70rpx;  
					textarea {
						width: 537rpx;
						min-height: 75rpx;
						max-height: 500rpx;
						background: #f1f1f1;
						border-radius: 40rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						color: #333333;
						line-height: 74rpx;
						padding: 5rpx 8rpx;
		      text-indent: 30rpx;
					}
				}
		        
				.send-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 76rpx;
					margin-left: 25rpx;
					width: 120rpx;
					height: 75rpx;
					background: #ed5a65;
					border-radius: 50rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			}
		}

	
	.uni-common-mt {
		margin-top: 10px;
	}
	
	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}
	.content {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		// height: 150rpx;
		// text-align: center;
		.session{
			width: 100%;
			// display: flex; /* 使用 Flexbox 布局 */
			justify-content: space-between; /* 左中右元素分布在容器内的起始、中间和末尾位置 */
			.accurantTime{
				font-size: 20rpx;
				margin-left: 40rpx;
				height: 0rpx;
			}
			.session1{
				background: white;
				height: 120rpx;
				margin-bottom: 30rpx;
				border-radius: 5rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.sessionleft1{
					flex: 43%;
					margin-right: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left1{
						font-size: 25rpx;
						width: 120rpx;
						margin-left: 40rpx;
					}
					.right1{
						width: 90rpx;
						height: 60rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.sessioncenter1{
					flex: 14%;
					text-align: center;
					align-items: center;
				}
				.sessionright1{
					flex: 43%;
					margin-left: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left2{
						width: 90rpx;
						height: 60rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.right2{
						font-size: 25rpx;
						width: 120rpx;
					}
				}
			}
			.session2{
				background: #eee;
				height: 120rpx;
				margin-bottom: 30rpx;
				border-radius: 5rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.sessionleft2{
					flex: 40%;
					margin-right: 30rpx;
					align-items: center;
				}
				.sessioncenter2{
					flex: 20%;
					text-align: center;
					align-items: center;
				}
				.sessionright2{
					flex: 40%;
					margin-left: 30rpx;
					align-items: center;
				}
			}
		}
	}
	
	.content-text {
		font-size: 14px;
		color: #666;
	}
	.commented {
		font-size: 14px;
		color: #666;
	}
	.eventImages{
		margin-top: 150px;
		width: 650rpx;
		
	}
	
	.container {  
	  padding: 10px;  
	} 
	
	.search-bar {  
	  display: flex;  
	  align-items: center;  
	  background-color: #f0f0f0;  
	  padding: 0px;  
	  border-radius: 5px;  
	} 
	
	.search-input {  
	  flex: 1;  
	  padding: 5px;  
	  border: none;  
	  border-radius: 5px 0 0 5px;  
	}
	
	.search-btn {  
	  padding: 0px 20px;  
	  background-color: #007aff;  
	  color: white;  
	  border: none;  
	  border-radius: 0 5px 5px 0;  
	}
	
	.search-results {  
	  margin-top: 10px;  
	}
	
	.result-item {  
	  padding: 10px;  
	  border-bottom: 1px solid #eee;  
	}
	.float{
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		.item{
			width: 90rpx;
			height: 90rpx;
			background: rgba(255,255,255,0.93);
			border-radius: 50%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #eee;
		}
	}
	.imgContainer{
		width: 750rpx;
		height: 400rpx;
		padding: 0 20rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}
	}
	.post{
		width: 690rpx;
		margin-left: 30rpx;
	}
	.content-text{
		width: 690rpx;
		margin-left: 30rpx;
		
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		.message-bubble {
		  max-width: 70%;
		  padding: 20rpx;
		  border-radius: 15px;
		  font-size: 30rpx;
		  background-color: #dcf8c6;
		  margin: 15rpx 50rpx;
		  position: relative;
		  align-self: flex-end;
		}
	
		// .from-me {
		//   background-color: #dcf8c6; /* 自己发送的消息颜色 */
		//   align-self: flex-end; /* 右对齐 */
		// }
		
		// .message-bubble:not(.from-me) {
		//   background-color: #f1f0f0; /* 其他人的消息颜色 */
		//   align-self: flex-start; /* 左对齐 */
		// }
		// .commentContent{
		// 	width: 100%;
		// 	font-size: 30rpx;
		// 	display: block;
		// 	color: black;
		// 	margin-bottom: 20rpx;
		// }
	}
	.commented{
		width: 690rpx;
		margin-left: 0rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		.message-bubble1 {
		  max-width: 70%;
		  padding: 20rpx;
		  border-radius: 15px;
		  font-size: 30rpx;

		  margin: 10rpx 20rpx;
		  position: relative;
		  background-color: #f1f0f0; /* 其他人的消息颜色 */
		  align-self: flex-start;
		}
	}
	.commentbtn{
		height: 40rpx;
		width: 400rpx;
		margin-left: 140rpx;
		margin-top: 500rpx;
	}
	.commentContainer{
		display: flex;
	}
	.img{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		.image{
			width: 100%;
			height: 100%;
		}
	}
	.username{
		margin-top: -5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>